<script setup lang="ts">
  import { onMounted, ref } from "vue";
  import { useMemberStore } from "@/stores";

  const memberStore = useMemberStore();
  const list = ref<any>([]);

  onMounted(() => {
    fetchList();
  });

  async function fetchList() {
    list.value = await memberStore.getMembers();
  }
</script>

<template>
  <div class="page-container">
    <Breadcrumb :items="['用户管理', '角色列表']"></Breadcrumb>
    <a-card :bordered="false">
      <a-table :data="list">
        <template #columns>
          <a-table-column title="序号" :width="100">
            <template #cell="{ rowIndex }">
              {{ rowIndex + 1 }}
            </template>
          </a-table-column>
          <a-table-column title="会员昵称" data-index="userId" />
          <a-table-column title="开始时间" data-index="startedAt" />
          <a-table-column title="结束时间" data-index="endedAt" />
        </template>
      </a-table>
    </a-card>
  </div>
</template>
